<template>

    <div class = "footer_box">
        <van-tabbar v-if = "tab_show" class = "tabbar_box" v-model="active" active-color = "#41c1ec" >       
            <van-tabbar-item class = "tabbar_item" to = "/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item class = "tabbar_item" to = "/dest" icon="good-job-o">推荐</van-tabbar-item>
            <van-tabbar-item class = "tabbar_item" icon="plus"></van-tabbar-item>
            <van-tabbar-item class = "tabbar_item" to = "/show" icon="video-o">演出</van-tabbar-item>
            <van-tabbar-item class = "tabbar_item" to = "/me" icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
        <van-tabbar v-else class = "tabbar_box_plus" route>
            <van-tabbar-item class = "tabbar_item" icon = "plus" to = "#"></van-tabbar-item>
        </van-tabbar>
    </div>

</template>

<script>
export default {
    name: 'WorkspaceJsonFooters',

    data() {
        return {
            active: 0,
            tab_show: true
        };
    },

    mounted() {
        this.monitor();
    },

    methods: {
        monitor() {
            let startY;
            document.addEventListener("touchstart", function(e) {
                startY = e.touches[0].screenY;
               
            }, false);
            document.addEventListener("touchend", (e) => {
                
                let endY = e.changedTouches[0].screenY;
                let resuY = endY - startY;
                if(resuY > 10) {
                    this.tab_show = true;
                } else if(resuY < -10) {
                    this.tab_show = false;
                }

            }, false)
        }
        
    },
};
</script>

<style lang="scss" scoped>
    .footer_box {
        display: flex;
        justify-content: center;
        height: 13vw;
        width: 100%;
        position: fixed;
        bottom: 30px;
        .tabbar_box {
            left: 50%;
            bottom: 30px;
            margin-left: -40vw;
            width: 80vw;
            height: 13vw;
            border: 1px solid #ccc;
            border-radius: 6.5vw;
            transition: .3s;
            .tabbar_item {
                border-radius: 6.5vw;

            }
        }
        .tabbar_box_plus {
            left: 50%;
            bottom: 30px;
            margin-left: -6.5vw;
            width: 13vw;
            height: 13vw;
            border: 1px solid #ccc;
            border-radius: 6.5vw;
            transition: .3s;

            .tabbar_item {
                border-radius: 6.5vw;

            }
        }
    }
    
    
</style>